<template>
  <div class="container">
    <a-card class="custom-card" title="">
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="false"
        :data="renderData"
        :bordered="{ wrapper: true, cell: true }"
        :scroll="tableScroll"
        :span-method="spanMethod"
        span-all
        column-resizable
      >
        <template #columns>
          <a-table-column title="目的港" data-index="aim" align="center" :width="130"/>
          <a-table-column title="船公司" data-index="company" align="center" :width="100"/>
          <a-table-column title="所属联盟" data-index="union" align="center" :width="95"/>
          <a-table-column title="美国船期表" align="center">
            <a-table-column title="华南" align="center">
              <a-table-column title="" data-index="south_empty" align="center" :width="95">

              </a-table-column>
              <a-table-column title="周一" data-index="south_week1" align="center" :width="95">
<!--                <template #cell="{ record }">
                  <span v-if="record.south_week1">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周二" data-index="south_week2" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.south_week2">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周三" data-index="south_week3" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.south_week3">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周四" data-index="south_week4" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.south_week4">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周五" data-index="south_week5" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.south_week5">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周六" data-index="south_week6" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.south_week6">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周日" data-index="south_week7" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.south_week7">√</span>
                </template>-->
              </a-table-column>
            </a-table-column>
            <a-table-column title="华东" align="center">
              <a-table-column title="" data-index="east_empty" align="center" :width="95">

              </a-table-column>
              <a-table-column title="周一" data-index="east_week1" align="center" :width="95">
<!--                <template #cell="{ record }">
                  <span v-if="record.east_week1">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周二" data-index="east_week2" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.east_week2">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周三" data-index="east_week3" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.east_week3">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周四" data-index="east_week4" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.east_week4">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周五" data-index="east_week5" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.east_week5">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周六" data-index="east_week6" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.east_week6">√</span>
                </template>-->
              </a-table-column>
              <a-table-column title="周日" data-index="east_week7" align="center" :width="65">
<!--                <template #cell="{ record }">
                  <span v-if="record.east_week7">√</span>
                </template>-->
              </a-table-column>
            </a-table-column>
          </a-table-column>
        </template>
<!--        <template #south_week1="{ record }">
          <span v-if="record.south_week1">√</span>
        </template>
        <template #south_week2="{ record }">
          <span v-if="record.south_week2">√</span>
        </template>
        <template #south_week3="{ record }">
          <span v-if="record.south_week3">√</span>
        </template>
        <template #south_week4="{ record }">
          <span v-if="record.south_week4">√</span>
        </template>
        <template #south_week5="{ record }">
          <span v-if="record.south_week5">√</span>
        </template>
        <template #south_week6="{ record }">
          <span v-if="record.south_week6">√</span>
        </template>
        <template #south_week7="{ record }">
          <span v-if="record.south_week7">√</span>
        </template>
        <template #east_week1="{ record }">
          <span v-if="record.east_week1">√</span>
        </template>
        <template #east_week2="{ record }">
          <span v-if="record.east_week2">√</span>
        </template>
        <template #east_week3="{ record }">
          <span v-if="record.east_week3">√</span>
        </template>
        <template #east_week4="{ record }">
          <span v-if="record.east_week4">√</span>
        </template>
        <template #east_week5="{ record }">
          <span v-if="record.east_week5">√</span>
        </template>
        <template #east_week6="{ record }">
          <span v-if="record.east_week6">√</span>
        </template>
        <template #east_week7="{ record }">
          <span v-if="record.east_week7">√</span>
        </template>-->
      </a-table>
      <a-alert type="success">名词解释：六截五开的意思是当周周六截单次周五开船。</a-alert>
      <a-alert>注：除MASTON和cul以外，其它普船大多会有延误，请以最终开船时间为准</a-alert>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { useI18n } from 'vue-i18n';

  import useLoading from '@/hooks/loading';
  import screenHeight from '@/utils/screen-height';

  const { loading, setLoading } = useLoading(true);
  const { t } = useI18n();
  const height = screenHeight(265);
  // const columns = reactive([
  //   {
  //     title: '目的港', dataIndex: 'aim', width: 130,
  //   },
  //   {
  //     title: '船公司', dataIndex: 'company', width: 100,
  //   },
  //   {
  //     title: '所属联盟', dataIndex: 'union', width: 95,
  //   },
  //   {
  //     title: '美国船期表',
  //     children: [
  //       {
  //         title: '华南',
  //         children: [
  //           {
  //             title: '', dataIndex: 'south_empty', width: 95,
  //           },
  //           {
  //             title: '周一', dataIndex: 'south_week1', width: 65,
  //             slotName: 'south_week1',
  //           },
  //           {
  //             title: '周二', dataIndex: 'south_week2', width: 65,
  //             slotName: 'south_week2',
  //           },
  //           {
  //             title: '周三', dataIndex: 'south_week3', width: 65,
  //             slotName: 'south_week3',
  //           },
  //           {
  //             title: '周四', dataIndex: 'south_week4', width: 65,
  //             slotName: 'south_week4',
  //           },
  //           {
  //             title: '周五', dataIndex: 'south_week5', width: 65,
  //             slotName: 'south_week5',
  //           },
  //           {
  //             title: '周六', dataIndex: 'south_week6', width: 65,
  //             slotName: 'south_week6',
  //           },
  //           {
  //             title: '周日', dataIndex: 'south_week7', width: 65,
  //             slotName: 'south_week7',
  //           },
  //         ],
  //       },
  //       {
  //         title: '华东',
  //         children: [
  //           {
  //             title: '', dataIndex: 'east_empty', width: 95,
  //           },
  //           {
  //             title: '周一', dataIndex: 'east_week1', width: 65,
  //             slotName: 'east_week1',
  //           },
  //           {
  //             title: '周二', dataIndex: 'east_week2', width: 65,
  //             slotName: 'east_week2',
  //           },
  //           {
  //             title: '周三', dataIndex: 'east_week3', width: 65,
  //             slotName: 'east_week3',
  //           },
  //           {
  //             title: '周四', dataIndex: 'east_week4', width: 65,
  //             slotName: 'east_week4',
  //           },
  //           {
  //             title: '周五', dataIndex: 'east_week5', width: 65,
  //             slotName: 'east_week5',
  //           },
  //           {
  //             title: '周六', dataIndex: 'east_week6', width: 65,
  //             slotName: 'east_week6',
  //           },
  //           {
  //             title: '周日', dataIndex: 'east_week7', width: 65,
  //             slotName: 'east_week7',
  //           },
  //         ],
  //       },
  //     ],
  //   },
  // ]);
  const renderData = ref<any[]>([]);
  const tableScroll = ref({
    x: '100%',
    y: height,
  });

  const fetchData = async () => {
    const data = [
      {
        id: 1,
        aim: 'LA(洛杉矶港）',
        company: 'COSCO',
        union: 'OA',
        south_empty: '六截五开',
        south_week1: '',
        south_week2: '',
        south_week3: '',
        south_week4: '',
        south_week5: '√',
        south_week6: '√',
        south_week7: '',
        east_empty: '六截四开',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '√',
        east_week5: '',
        east_week6: '√',
        east_week7: '',
      },
      {
        id: 2,
        aim: 'LA(洛杉矶港）',
        company: 'CMA',
        union: 'OA',
        south_empty: '五截六开',
        south_week1: '',
        south_week2: '',
        south_week3: '',
        south_week4: '',
        south_week5: '√',
        south_week6: '√',
        south_week7: '',
        east_empty: '六截六开',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '',
        east_week5: '',
        east_week6: '√',
        east_week7: '',
      },
      {
        id: 3,
        aim: 'LA(洛杉矶港）',
        company: 'EMC',
        union: 'OA',
        south_empty: '五截六开',
        south_week1: '',
        south_week2: '',
        south_week3: '',
        south_week4: '',
        south_week5: '√',
        south_week6: '√',
        south_week7: '',
        east_empty: '四截六开',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '√',
        east_week5: '',
        east_week6: '√',
        east_week7: '',
      },
      {
        id: 4,
        aim: 'LB（长滩港）',
        company: 'ZIM',
        union: '独立',
        south_empty: '六截三开',
        south_week1: '',
        south_week2: '',
        south_week3: '√',
        south_week4: '',
        south_week5: '',
        south_week6: '√',
        south_week7: '',
        east_empty: '*',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '',
        east_week5: '',
        east_week6: '',
        east_week7: '',
      },
      {
        id: 5,
        aim: 'LB（长滩港）',
        company: 'MASTON',
        union: '独立',
        south_empty: '五截三开',
        south_week1: '',
        south_week2: '',
        south_week3: '√',
        south_week4: '',
        south_week5: '√',
        south_week6: '',
        south_week7: '',
        east_empty: '六截三开',
        east_week1: '',
        east_week2: '',
        east_week3: '√',
        east_week4: '',
        east_week5: '',
        east_week6: '√',
        east_week7: '',
      },
      {
        id: 6,
        aim: 'LB（长滩港）',
        company: 'CUL',
        union: '独立',
        south_empty: '六截五开',
        south_week1: '',
        south_week2: '',
        south_week3: '',
        south_week4: '',
        south_week5: '√',
        south_week6: '√',
        south_week7: '',
        east_empty: '五截六开',
        east_week1: '',
        east_week2: '',
        east_week3: '',
        east_week4: '',
        east_week5: '√',
        east_week6: '√',
        east_week7: '',
      },
    ];
    renderData.value = data;
    setLoading(false);
  };
  // 合并单元格
  const spanMethod = (data: any) => {
    const { column, columnIndex, record, rowIndex } = data;
    if (columnIndex === 0 && (rowIndex === 0 || rowIndex === 3)) {
      return {
        rowspan: 3,
      };
    }
    if (columnIndex === 2 && (rowIndex === 0 || rowIndex === 3)) {
      return {
        rowspan: 3,
      };
    }
    return undefined;
  };

  fetchData();
</script>

<script lang="ts">
  export default {
    name: 'DeliveryShipdate',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
